import 'package:flutter_jd/pages/tabbar/home/controller.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MallList extends GetWidget<HomeController> {
  @override
  Widget build(BuildContext context) {
    return _buildMappList();
  }

  Widget _buildMappList() {
    return Container(
      child: Column(
        children: [
          Container(
            height: 155.h,
            padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
            child: PageView(
              onPageChanged: (int index) {
                controller.appListCurInd.value = index % (2);
              },
              children: <Widget>[
                Container(
                  child: Column(
                    children: [
                      _buildScrollRow(controller.appList1.sublist(0, 5)),
                      _buildScrollRow(controller.appList1.sublist(5, 10),
                          top: 10),
                    ],
                  ),
                ),
                Container(
                  child: Column(
                    children: [
                      _buildScrollRow(controller.appList2.sublist(0, 5)),
                      _buildScrollRow(controller.appList2.sublist(5, 10),
                          top: 10),
                    ],
                  ),
                )
              ],
            ),
          ),
          Obx(
            () => Container(
              padding: EdgeInsets.only(bottom: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(
                  2,
                  (i) {
                    return Container(
                      margin: EdgeInsets.symmetric(horizontal: 3),
                      width: 6,
                      height: 6,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: controller.appListCurInd.value == i
                            ? Color(0xFFFd3D29)
                            : Color(0xFFE3E3E3),
                      ),
                    );
                  },
                ).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildScrollRow(List iconList, {double top = 0}) {
    return Container(
      margin: EdgeInsets.only(top: top.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List.generate(
          5,
          (index) {
            var src = iconList[index]['icon'];
            var text = iconList[index]['title'];

            return Container(
              width: 55.r,
              height: 62.r,
              child: Column(
                children: [
                  Container(
                    width: 40.sp,
                    child: Image.asset(src),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 4.h),
                    child: Text(
                      text,
                      style: TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
